<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

           function WarningBanner(props) {
                if (!props.warn) {
                    return null;
                }

                return (
                    <div className="warning">
                        Warning!
                    </div>
                );
            } 
        
            class Page extends React.Component{

                constructor(props) {
                    super(props)
                    this.state = {
                        showWarning:true
                    };
                    // 这个绑定是必要的，使`this`在回调中起作用
                    this.handleToggleClick = this.handleToggleClick.bind(this);
                }

                handleToggleClick(){
                    this.setState((preState,props)=>({
                        showWarning: !preState.showWarning
                    }))
                }
                
                render(){
                    return (
                        <div>
                           <WarningBanner warn={this.state.showWarning}/>
                           <button onClick={this.handleToggleClick}>
                                {this.state.showWarning ? 'Hide':'Show'}
                           </button> 
                        </div>
                    );
                }
            }

            ReactDOM.render(
               <Page />, document.getElementById('root') 
            )

    </script>
  </body>
</html>